<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set var="user" value="${sessionScope.user}"/>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>特权中心</title>
</head>

<body>
<div class="myaccount">
  <div class="row">
    <div class="ucenter">
      <div class="ucenter-info mt10">
        <div class="info-title">
          <h5 style="display: inline-block;">特权中心</h5>
        </div>
        <div class="info">
          <ul class="info-img">
            <li><img src="${path}/avatar/${user.headUrl}" class="avatar" /></li>
          </ul>
          <div class="info-main">
            <%--数据显示--%>
            <div id="associator_list"></div>
            <div class="row">
              <label>
                优惠券：</label><button class="BUTTON" id="btn_associator" type="button" style="height: 30px;">我的优惠券</button></div>
              <div id="associator_div1" style="display: none; margin-left: -20%;">
                <div class=" myaccount-table table-responsive text-center">
                  <table class="table table-bordered">
                    <thead class="thead-light">
                    <tr style="line-height: 6px;">
                      <th>优惠券名</th>
                      <th>描述</th>
                      <th>消耗积分</th>
                      <%--<th>备注</th>--%>
                    </tr>
                    </thead>
                    <%--优惠券详情--%>
                    <tbody id="my_coupon"></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="clear">
          </div>
        </div>
      </div>
    </div>
  </div>
<%--</div>--%>
</body>

<script type="text/javascript">
  $(document).ready(function() {
    var user="<%=session.getAttribute("user")%>";
    var uid = ${user.id};
    console.log(uid);

    //显示会员信息
    $.ajax({
      type: 'POST',
      url: '/member/power',
      dataType: "json",
      data: {id:uid},
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = "";
        console.log(result);
        str +='<div class="row">';
        str +='    <label>';
        str +='        用户名：</label>${user.username}<a href="${path}/chat?role=kf" style="margin-left: 5%;">';
        str +='        <button class="BUTTON" id="myChat" type="button" style="height: 30px;">我的专属客服</button>';
        str +='        </a></div>';
        str +='<div class="row">';
        str +='    <label>';
        str +='        等级名：</label>'+ result.等级名 +'</div>';
        str +='<div class="row">';
        str +='    <label>';
        str +='        用户积分：</label>'+ result.用户积分 +'</div>';
        str +='<div class="row">';
        str +='    <label>';
        str +='        积分系数：</label>'+ result.积分系数 +'</div>';
        str +='<div class="row">';
        str +='    <label>';
        str +='        折扣系数：</label>'+ result.折扣系数 +'</div>';
        str +='<div class="row">';
        str +='    <label>';
        str +='        上限：</label>'+ result.上限 +'</div>';
        str +='<div class="row">';
        str +='    <label>';
        str +='        下限：</label>'+ result.下限 +'</div>';
        $('#associator_list').html(str);
      }
    });

    //优惠券详情
    $("#btn_associator").click(function() {
      //显示优惠券
      $.ajax({
        type: 'POST',
        url: '/member/power/myCoupon',
        dataType: "json",
        data: {id:uid},
        error: function () {
          console.log("失败");
        },
        success: function (result) {
          if(result == null){
            alert("暂无可使用的优惠券，请领取优惠券");
          } else {
            $("#associator_div1").toggle();
            var str = '';
            for (var key in result) {
              str += '<tr>';
              str += '  <td>'+ result[key].itemName +'</td>';
              str += '  <td>'+ result[key].description +'</td>';
              str += '  <td>'+ result[key].credit +'</td>';
//              str += '  <td>'+ result[key].remark +'</td>';
              str += '</tr>';
            }
            $('#my_coupon').html(str);
          }
        }
    });
    });
  });
</script>

<style>
  .myaccount {
    overflow-y: auto;
    height: 500px;
    width: 815px;
  }
  body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #8A8A8A;
    font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif, "宋体";
  }

  .row {
    /*width: 960px;*/
    width: 100%;
    /*margin:0 auto;*/
  }

  .ucenter {
    width: 780px;
    /*margin: 0 auto;*/
    text-align: left;
  }

  .ucenter-info {
    /* border: 1px solid #EBEBEB;*/
    padding: 10px;
  }

  .ucenter-info .info-title {
    text-align: center;
    /* border-bottom: 1px solid #ebebeb;*/
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .ucenter .mt10 {
    margin-top: 10px;
  }

  .ucenter .info-title h5 {
    color: #FD9000;
    font-size: 20px;
    margin: 0;
  }

  .ucenter .info-img {
    width: 190px;
    text-align: center;
    float: left;
  }

  .ucenter .info-img li {
    line-height: 22px;
    list-style-type: none;
  }

  .ucenter .info-img li div {
    width: 92px;
    text-align: left;
    margin: 0 auto;
  }

  .ucenter .info-img .ico {
    width: 18px;
    height: 18px;
    position: relative;
    top: 5px;
    margin-right: 5px;
  }

  .ucenter .info-img .avatar {
    width: 132px;
    height: 132px;
  }

  .ucenter .info-main {
    float: left;
    width: 520px;
  }

  .ucenter .info-main .row {
    line-height: 28px;
    width: 520px;
  }

  .ucenter .info-main .row label {
    display: inline-block;
    margin-right: 10px;
    width: 60px;
  }

  .clear {
    clear: both;
  }
  .BUTTON {
    background: #3D608F;
    color: #FFFFFF !important;
    border: 1px solid #3D608F;
    border-radius: 15px;
  }
</style>

</html>
